<template>
  <div>
    <div class="header" style="line-height: 80px ;color: #fff;">
      <span style="margin-left:42%; line-height: 10%;font-size: larger " >可视化爬虫平台</span>
      <el-popconfirm
          confirm-button-text="Yes"
          cancel-button-text="No"
          :icon="InfoFilled"
          icon-color="#626AEF"
          @confirm="logout"
          @cancel="cancelLogout"
          title="确定要注销？"
          >
        <template #reference >
      <span class="logout" >
        <el-icon>
          <SwitchButton/>
        </el-icon>
            <span class="text-xl">注销</span>
      </span>
        </template>
      </el-popconfirm>
    </div>
    <!--内容区域    -->
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { doGet } from "../../api"
import router from "../../router"
//图标引入
import {
  SwitchButton, InfoFilled
} from '@element-plus/icons-vue'
import {ElMessage, ElNotification} from "element-plus";
const logout = () => {
  doGet("/api/user/logout",null,resp=>{
    if(resp.data===true){
      ElMessage.success("注销成功!")
      router.push("/login")
    }
  })
}
const cancelLogout = () => {
  console.log("取消注销")

}
</script>

<style scoped>
.header{
  background: #555C64FF;
  height: 60px;
}
.content{
  background: #f9fafb;
}
.logout{
  margin-left:35%;
}
</style>